<template>
  <WsmTable
    ref="table"
    v-model="queryFormType"
    load-url="/dbms-server/base/requestvalid/page"
    :change-load="true"
  >
    <template #title>{{ t('dbms.requestValid.title') }}</template>
    <template #query="{ data }">
      <el-form-item :label="t('dbms.requestValid.url')">
        <el-input v-model="data.url.value" />
      </el-form-item>
      <el-form-item :label="t('dbms.requestValid.validName')">
        <el-input v-model="data.validName.value" />
      </el-form-item>
      <el-form-item :label="t('dbms.requestValid.activity')">
        <el-radio-group v-model="data.activity.value">
          <el-radio value="">{{ t('dbms.requestValid.all') }}</el-radio>
          <el-radio value="0">{{ t('dbms.requestValid.disable') }}</el-radio>
          <el-radio value="1">{{ t('dbms.requestValid.enable') }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #button="{ row }">
      <el-button type="primary" v-hasPermi="'add'" @click="addForm.show()">{{
        t('common.add')
      }}</el-button>
      <el-button v-hasPermi="'update'" v-if="row" @click="update(row.id)" type="success">{{
        t('common.update')
      }}</el-button>
      <el-button v-hasPermi="'delete'" v-if="row" @click="del(row.id)" type="danger">{{
        t('common.delete')
      }}</el-button>
      <el-button v-hasPermi="'copy'" v-if="row" @click="copy(row.id)" type="success">{{
        t('common.copy')
      }}</el-button>
      <el-button
        v-hasPermi="'config'"
        v-if="row"
        @click="config(row.id, row.validName)"
        type="warning"
        >{{ t('dbms.requestValid.config') }}</el-button
      >
      <template v-if="row">
        <template v-if="row.activity == 1">
          <el-button v-hasPermi="'check'" @click="check(row.id)" type="danger">{{
            t('dbms.requestValid.disable')
          }}</el-button>
        </template>
        <template v-else>
          <el-button v-hasPermi="'check'" @click="check(row.id)" type="success">{{
            t('dbms.requestValid.enable')
          }}</el-button>
        </template>
      </template>
    </template>
    <template #column>
      <el-table-column prop="activity" :label="t('dbms.requestValid.activity')" width="70">
        <template #default="scope">
          <template v-if="scope.row.activity">
            <el-tag effect="dark" type="success">{{ t('dbms.requestValid.enable') }}</el-tag>
          </template>
          <template v-else>
            <el-tag effect="dark" type="danger">{{ t('dbms.requestValid.disable') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="urlType"
        :label="t('dbms.requestValid.urlType')"
        width="100"
        align="center"
      >
        <template #default="scope">
          <template v-if="scope.row.urlType == 0">
            <el-tag type="success">{{ t('dbms.requestValid.urlTypeInner') }}</el-tag>
          </template>
          <template v-else>
            <el-tag type="danger">{{ t('dbms.requestValid.urlTypeOuter') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="code" :label="t('dbms.requestValid.code')" width="250" />
      <el-table-column prop="validName" :label="t('dbms.requestValid.validName')" width="350" />
      <el-table-column prop="url" :label="t('dbms.requestValid.url')" />
    </template>
  </WsmTable>
  <WsmForm
    ref="addForm"
    v-model="addData"
    submit-url="/dbms-server/base/requestvalid/add"
    label-width="100px"
    :init-data="initData"
    :title="t('dbms.requestValid.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="urlType" :label="t('dbms.requestValid.urlType')">
            <el-select v-model="form.urlType" :placeholder="t('dbms.requestValid.urlType')">
              <el-option value="0" :label="t('dbms.requestValid.urlTypeInner')" />
              <el-option value="1" :label="t('dbms.requestValid.urlTypeOuter')" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16" v-if="form.urlType == 0">
          <el-form-item prop="url" :label="t('dbms.requestValid.url')">
            <el-cascader
              style="width: 100%"
              v-model="form.url"
              :placeholder="t('dbms.requestValid.url')"
              :options="appPaths"
              :props="permProps"
              filterable
            />
          </el-form-item>
        </el-col>
        <el-col :span="16" v-if="form.urlType == 1">
          <el-form-item prop="url" :label="t('dbms.requestValid.url')">
            <el-input v-model="form.url" :placeholder="t('dbms.requestValid.url')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="code" :label="t('dbms.requestValid.code')">
            <el-input v-model="form.code" :placeholder="t('dbms.requestValid.code')" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="validName" :label="t('dbms.requestValid.validName')">
            <el-input v-model="form.validName" :placeholder="t('dbms.requestValid.validName')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/dbms-server/base/requestvalid/get"
    submit-url="/dbms-server/base/requestvalid/update"
    label-width="100px"
    :title="t('dbms.requestValid.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="urlType" :label="t('dbms.requestValid.urlType')">
            <el-select v-model="form.urlType" :placeholder="t('dbms.requestValid.urlType')">
              <el-option :value="0" :label="t('dbms.requestValid.urlTypeInner')" />
              <el-option :value="1" :label="t('dbms.requestValid.urlTypeOuter')" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16" v-if="form.urlType == 0">
          <el-form-item prop="url" :label="t('dbms.requestValid.url')">
            <el-cascader
              style="width: 100%"
              v-model="form.url"
              :placeholder="t('dbms.requestValid.url')"
              :options="appPaths"
              :props="permProps"
              filterable
            />
          </el-form-item>
        </el-col>
        <el-col :span="16" v-if="form.urlType == 1">
          <el-form-item prop="url" :label="t('dbms.requestValid.url')">
            <el-input v-model="form.url" :placeholder="t('dbms.requestValid.url')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="code" :label="t('dbms.requestValid.code')">
            <el-input v-model="form.code" :placeholder="t('dbms.requestValid.code')" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="validName" :label="t('dbms.requestValid.validName')">
            <el-input v-model="form.validName" :placeholder="t('dbms.requestValid.validName')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
  <ConfigParams ref="configForm" />
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { checkstateApi, delApi, copyApi } from '@/api/dbms/requestvalid'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { getAppPathsApi } from '@/api/dbms/microservices'
import ConfigParams from './components/ConfigParams.vue'

const { t } = useI18n()

//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = ref({ code: 'default', urlType: '0' })
const addData: FormDataType = {
  code: 'default',
  url: '',
  urlType: '0',
  validName: ''
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  code: '',
  url: '',
  urlType: 0,
  validName: ''
}

const queryFormType: QueryFormType = {
  url: {
    value: '',
    queryType: QueryType.LIKE
  },
  validName: {
    value: '',
    queryType: QueryType.LIKE
  },
  activity: {
    value: '',
    queryType: QueryType.EQ
  }
}

//权限数据
const appPaths = ref([])

const permProps = { emitPath: false }

const loadAppPaths = async () => {
  const rs = await getAppPathsApi({ type: 'submit' })
  if (rs.success) {
    appPaths.value = rs.data
  }
}

loadAppPaths()

const update = (id: string) => {
  updateForm.value.show({ id })
}
const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi({ id })
    if (rs.success) {
      table.value.load(1)
    }
  })
}
const copy = async (id: string) => {
  ElMessageBox.confirm(t('common.copyMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await copyApi({ id })
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const check = async (id: string) => {
  const rs = await checkstateApi({ id })
  if (rs.success) {
    table.value.load()
  }
}

const configForm = ref()
const config = (id: string, title: string) => {
  configForm.value.show(id, title)
}

const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
